<script setup lang="ts">
import { Vue3TreeOrg } from 'vue3-tree-org'
import 'vue3-tree-org/lib/vue3-tree-org.css'

import { uuid } from '@/utils'
import { measuringToolsApi } from '@/api'

import AsyncComponent from '@/components/CustomDialog/AsyncComponent.vue'

interface DataType {
  id: number
  parentId: number
  name: string
  installationLocation: string
}

interface ListType {
  id: string
  pid: string
  label: string
  children?: ListType[]
  sid: string | null
  [key: string]: any
}

const loading = ref(true)
const treeData = ref<ListType>()

function resolveData(data: DataType[]): ListType[] {
  const items: ListType[] = []
  data.forEach((item) => {
    const { id, installationLocation, parentId, name }
      = item
    const sid = uuid()
    items.push({
      id: String(id),
      pid: String(parentId),
      label: name,
      sid,
    })
    items.push({
      id: sid,
      pid: String(id),
      label: installationLocation,
      sid: null,
    })
  })

  items.forEach((item) => {
    const { sid, pid } = item
    if (sid) {
      const target = items.find(v => v.sid && v.id === pid)
      item.pid = target?.sid || '0'
    }
  })
  return items
}

function list2tree(
  lists: ListType[],
  pid: string,
): ListType[] {
  const tree = {} as ListType
  lists.forEach((item) => {
    item.children = []
    tree[item.id] = item
  })
  return lists.filter((item) => {
    if (item.pid !== pid) {
      (tree[item.pid] as ListType).children?.push(item)
      return false
    }
    return true
  })
}

function getLabelClass(node: any) {
  const data = node.$$data as ListType
  return data.sid ? 'circle' : ''
}

async function queryLists() {
  loading.value = true
  try {
    const { data }
      = await measuringToolsApi.selectMeasuringTools()
    if (data) {
      // console.log('data: ', data);
      const treeList = list2tree(resolveData(data), '0')
      // console.log('treeList: ', treeList);
      treeData.value = treeList[0]
    }
  }
  finally {
    loading.value = false
  }
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div class="padding-sm container">
    <Suspense>
      <AsyncComponent>
        <Vue3TreeOrg
          v-if="treeData"
          class="diagram-org"
          :data="treeData"
          center
          :tool-bar="{
            scale: true,
            restore: true,
            expand: false,
            zoom: true,
            fullscreen: true,
          }"
          label-class-name="no-shadow"
          :define-menus="[]"
        >
          <template #default="{ node }">
            <div
              class="node-label"
              :class="getLabelClass(node)"
            >
              <span>{{ node.label }}</span>
            </div>
          </template>
        </Vue3TreeOrg>
      </AsyncComponent>
      <template #fallback>
        <div
          v-if="loading"
          v-loading="loading"
          class="width-fill heigh-fill"
        />
      </template>
    </Suspense>
  </div>
</template>

<style>
.diagram-org .no-shadow {
  box-shadow: none;
}
.diagram-org .node-label {
  display: inline-block;
  border: 1px solid;
  padding: 10px 15px;
  max-width: 120px;
}
.diagram-org .node-label > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-all;
}
.diagram-org .node-label::after {
  content: '';
  display: inline-block;
  height: 0;
  padding-top: 100%;
  vertical-align: middle;
}
.diagram-org .node-label.circle {
  border-radius: 50%;
}
.diagram-org .tree-org-node:after,
.diagram-org .tree-org-node:not(:first-child):before,
.diagram-org .tree-org-node:not(:last-child):after,
.diagram-org
  .collapsable
  .tree-org-node.collapsed
  .tree-org-node__content:after,
.diagram-org .tree-org-node__children:before,
.diagram-org .horizontal .tree-org-node:only-child:before,
.diagram-org
  .horizontal
  .tree-org-node:not(:first-child):before,
.diagram-org
  .horizontal
  .tree-org-node:not(:last-child):after,
.diagram-org
  .horizontal
  .tree-org-node:not(:only-child):after,
.diagram-org
  .horizontal.collapsable
  .tree-org-node.collapsed
  .tree-org-node__content:after,
.diagram-org .horizontal .tree-org-node__children:before,
.diagram-org .zm-tree-handle .zm-tree-handle-item,
.diagram-org .zm-tree-contextmenu {
  border-color: inherit;
}
</style>
